<template>
    <view class="home-container">
        <view id="container-top">
            <layout-module v-for="item in list" :config="item.content" :key="item.id" ref="modules"></layout-module>
        </view>
        <layout-module v-if="last" :config="last.content" :key="last.id" ref="reRef" @scrollTo="scrollTo"></layout-module>
    </view>
</template>

<script lang="ts" setup>
import layoutModule from '@/components/layout-module/layout-module.vue';
import { computed, onMounted, nextTick, ref } from 'vue'
import { useUserStore } from '@/store'

const userStore = useUserStore()

const isVisitor = computed(() => {
    return userStore.userInfo?.type === 3
})
/** 移除 商品分类之后的 组件列表 */
const list = ref<Array<any>>([])
/** 商品分类组件 */
const last = ref<any>(undefined)

onMounted(() => {
    /** 判断是否为游客 显示认证提醒 */
    if (!isVisitor.value) authPop();

    uni.$u.$api.BaseApi.storeTemplate().then((res: any) => {
        last.value = res.components.pop()
        list.value = res.components
    })
})

/** 滚动到组件 */
function scrollTo() {
    console.log('scrollTo')
    nextTick(() => {
        const sys: any = uni.getSystemInfoSync()
        uni.$u.getRect('#container-top').then((res: any) => {
            let value = res.height - sys.statusBarHeight + 44
            uni.pageScrollTo({
                scrollTop: value,
                duration: 100
            })
        })
    })
}
/** 弹窗 认证 */
function authPop(){
    let status = userStore.config?.authStatus
    // #ifdef APP-PLUS
    // 除状态4之外 都需要弹窗
    if (status != 4) {
        // 认证弹窗
        setTimeout(()=>{
            const subNvue = uni.getSubNVueById('customPop');
            subNvue.show('fade-in');
        },800)
    }
    // #endif
}
</script>

<style scoped lang="scss">
.home-container{
    padding-top: calc(66px + var(--status-bar-height));
}
</style>
